<!--
 * @Author: your name
 * @Date: 2021-01-27 17:35:47
 * @LastEditTime: 2021-01-28 17:18:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tlwok-front-purchase-platfrom\src\pages\admin\settingsMenu\purchaserAccess.vue
-->
<template>
  <div>
    <el-form :inline="true" ref="form" label-width="100px">
      <el-form-item label="用户编号：">
        <el-input v-model.trim="id" placeholder="请输入用户编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addId()"
          >新增</el-button
        ></el-form-item
      >
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="tableHeaderColor"
      :cell-style="tableCellStyle"
    >
      <el-table-column prop="userId" label="用户编码"> </el-table-column>
      <el-table-column prop="userName" label="用户名"> </el-table-column>
      <el-table-column prop="companyName" label="公司名称"> </el-table-column>
      <el-table-column prop="mobile" label="认证手机"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
            <el-button slot="reference" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-handler">
      <div></div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="pageSizeArr"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { pageList, addId, del } from '@/api/settingsMenu/purchaserAccess'
export default {
  data() {
    return {
      id: null,
      total: 0,
      pageSizeArr: [10, 20, 30, 40],
      pageSize: 10, // 分页页面数量大小
      pageIndex: 1, // 开始页码
      tableData: [],
    }
  },
  methods: {
    // 修改table header的背景色
    tableHeaderColor() {
      return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
    },
    // 修改table tr行的样式
    tableCellStyle() {
      return 'text-align:center'
    },
    // 分页数量大小设置
    handleSizeChange(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getList()
    },
    // 分页当前页设置
    handleCurrentChange(val) {
      this.pageIndex = val
      this.getList()
    },
    async getList() {
      const loading = this.$loading()
      const { total, list } = await pageList({
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
      })
      loading.close()
      this.total = total
      this.tableData = list
    },
    async addId() {
      if (!/^\d+$/.test(this.id)) {
        this.$message.error('请输入正确的用户编码')
        return
      }
      const loading = this.$loading()
      try {
        await addId(this.id)
        this.$message.success('新增成功')
        this.id = null
        this.getList()
      } catch (error) {
        console.log(error)
      }
      loading.close()
    },
    async del(id) {
      const loading = this.$loading()
      try {
        await del(id)
        this.$message.success('删除成功')
        this.getList()
      } catch (error) {
        console.log(error)
      }
      loading.close()
    },
  },
  mounted() {
    this.getList()
  },
}
</script>

<style scoped lang="scss">
.table-handler {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
}
</style>